<template>
	<view class="container">
		<u-navbar title="家庭地址" :border-bottom="false">
			<text slot="right" class="addaddress" @tap="navigateTonewadd()">新增地址</text>
		</u-navbar>
		<view class="address-scroll" :style="{height:scrollViewheight+'rpx'}">
			<scroll-view scroll-y="true" :style="{height:scrollViewheight+'rpx'}">
				<view class="address-item" v-for="(additem,addindex) in addresslist" :key="additem.id" @tap="selectOrEditadd(additem)" :class="{'first-item':addindex==0}">
					<view class="address-item-left">
						<view class="username-phone">
							<text class="username">{{additem.name}}</text>
							<text class="userphone">{{additem.phone|getaddListphone}}</text>
						</view>
						<view class="useraddress">
							<text>{{additem.area}}{{additem.address}}</text>
						</view>
					</view>
					<view class="address-item-right" @tap.stop="navigateToeditadd(additem)">
						<u-icon name="/static/icon_xg_61.png" size="30"></u-icon>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-modal content="确定选择该地址？" confirm-color="rgba(14, 174, 100, 1)" :show-cancel-button="true" v-model="showAskSelectmodal" @confirm="selectComeadd()"></u-modal>
	</view>
</template>

<script>
	import {getAddresslist} from '@/apis/request.js';
	export default {
		data() {
			return {
				scrollViewheight:0,
				usertoken:'',
				addresslist:[],
				mode:'',
				showAskSelectmodal:false,
			    selectAdd:{}
			}
		},
		created() {
		    const windowHeight=uni.getSystemInfoSync().windowHeight;
			// console.log(windowHeight)
			this.scrollViewheight=(windowHeight-44)/uni.getSystemInfoSync().windowWidth*750-20;
		},
		onLoad(options) {
			this.usertoken=uni.getStorageSync('userInfo').token;
			this.mode=options.mode;
		},
		onShow() {
			this.requestAddresslist();
		},
		methods: {
			navigateTonewadd(){
				uni.navigateTo({
					url:`newaddress/newaddress?mode=${'add'}`
				});
			},
			requestAddresslist(){
				this.$http({
					url:getAddresslist,
					method:"POST",
					data:{},
					header:{
						'content-type':'application/x-www-form-urlencoded',
						'Token':this.usertoken
					}
				})
				.then(res=>{
					// console.log(res);
					if(res[1].data.status=='200'){
						this.addresslist=res[1].data.data;
					}
				})
				.catch(err=>{
					console.log(err);
				});
			},
			navigateToeditadd(additem){
				uni.setStorageSync('eidtaddInfo',additem);
				uni.navigateTo({
					url:`newaddress/newaddress?mode=${'edit'}`
				});
			},
			selectOrEditadd(additem){
				if(this.mode=='selectadd'){
					this.selectAdd=additem;
					this.showAskSelectmodal=true;
				}else if(this.mode=='getlist'){
					this.navigateToeditadd(additem);
				}
			},
			selectComeadd(){
				uni.setStorageSync('comeaddInfo',this.selectAdd);
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					});
				},200)
			}
		},
		filters:{
			getaddListphone(val){
				const subnum = val.substr(3,4);
				return val.replace(subnum,'****');
			}
		}
	}
</script>

<style lang="scss">
    page{
		width: 100%;
		height: 100%;
	}
	.container{
		width: 100%;
		height: 100%;
		background-color: rgba(244, 248, 251, 1);
		.addaddress{
			color: rgba(14, 174, 100, 1);
			font-size:  15px;
		}
		.address-scroll{
			width: 100%;
			margin-top: 20rpx;
			.address-item{display: flex;padding-top: 20rpx;padding-bottom: 20rpx;width: 100%;background-color: #fff;justify-content: center;align-items: center;margin-top: 20rpx;}
			.first-item{margin-top: 0rpx;}
			.address-item-left{
				width: 640rpx;
				display: flex;
				flex-wrap: wrap;
				height: auto;
				.username-phone{
					width: 100%;
					display: flex;
					align-items: flex-end;
					.username{max-width: 50%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size: 30rpx;}
					.userphone{font-size: 26rpx;width: 50%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left: 20rpx;}
				}
				.useraddress{
					width: 100%;
					font-size: 25rpx;
					color: rgba(136, 136, 136, 1);
					height: auto;
					margin-top: 15rpx;
				}
			}
			.address-item-right{
				margin-left: 20rpx;
				width: 30rpx;
			}
		}
	}
</style>
